<template>
    <div>
        <p v-show="show">111</p>
        <p v-show="!show">222</p>
        <button @click="change">切换</button>
        <ul>
            <li v-for="item in list" :key="item.id" @click ="listClick(item.id)">
                {{item.name}}
            </li>
        </ul>
        <p v-if="list.length === 0">暂无数据</p>
    </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      list: [
        {
          id: 1,
          name: "计算属性",
          router: "cp"
        },
        {
          id: 2,
          name: "观察者",
          router: "watch"
        },
        {
          id: 3,
          name: "vue中的属性绑定",
          router: "property"
        },
        {
          id: 4,
          name: "vue mixins",
          router: "mixins"
        },
        {
          id: 5,
          name: "vue vuex",
          router: "movie"
        },
        {
          id: 6,
          name: "v-if",
          router: "vif"
        }
      ]
    };
  },
  methods: {
    change() {
      this.show = !this.show;
    },
    listClick(id) {
      // this.list = this.list.filter(val =>{
      //     return val.id !== id
      // })
      this.list[0] = {
        id: "001",
        name: "test",
        router: "cp"
      };
      console.log(this.list)
    }
  }
};
</script>
